<template>
	<view class="commission-detail-container">
		<!-- 佣金订单列表 -->
		<view class="commission-list">
			<view class="commission-item" v-for="(item, index) in commissionList" :key="index">
				<!-- 订单基本信息 -->
				<view class="order-summary" @click="toggleDetail(index)">
					<view class="order-left">
						<text class="order-number">{{ item.order_no }}</text>
						<text class="order-info">{{ item.ordering_user_name }} · {{ item.spu_name }}</text>
						<text class="order-date">{{ item.create_date }}</text>
					</view>
					<view class="order-right">
						<text class="order-amount">¥{{ item.total_amount }}</text>
						<text class="my-commission">我的佣金：¥{{ item.commission_amount }}</text>
						<view class="expand-icon" :class="{ expanded: item.expanded }">
							<text class="icon-text">{{ item.expanded ? '▲' : '▼' }}</text>
						</view>
					</view>
				</view>

				<!-- 佣金分配详情（展开显示） -->
				<view class="commission-detail" v-if="item.expanded">
					<!-- <view class="detail-title">
						<text class="title-text">佣金分配明细</text>
					</view> -->
					<view class="detail-list">
						<view class="detail-item" v-for="(detail, dIndex) in item.commissionDetails" :key="dIndex"
							:class="{ 'self-commission': detail.commission_user_id===item.commission_user_id }">
							<view class="detail-content">
								<view class="detail-row">
									<text class="detail-type">{{ detail.commission_user_level_desc }}</text>
									<text
										class="detail-rate">{{ detail.commission_value+(detail.commission_is_fixed===1?' 元':' %') }}</text>
								</view>
								<view class="detail-row">
									<text
										class="detail-name">{{ detail.realname }}{{detail.commission_user_id===item.commission_user_id?'（我）':''}}</text>
									<text class="detail-amount">¥{{ detail.commission_amount }}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 空状态 -->
		<view class="empty-state" v-if="commissionList.length === 0">
			<image src="@/static/images/empty-commission.png" mode="aspectFit" class="empty-image"></image>
			<text class="empty-text">暂无佣金记录</text>
			<text class="empty-desc">快去推广商品获得佣金吧</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				hasSearched: false,
				recordCount: 0,
				page: 1,
				limit: 10,
				// 佣金明细列表
				commissionList: []
			}
		},
		onLoad(options) {
			this.onSearch();
		},
		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh() {
			if (!this.hasSearched) {
				this.page = 1
				this.recordCount = 0
				this.commissionList = []
				this.loadDataList()
			}
		},

		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom() {
			// 下拉触底，先判断是否有请求正在进行中
			// 以及检查当前请求页数是不是小于数据总页数，如符合条件，则发送请求
			const page = this.page
			const limit = this.limit
			const recordCount = this.recordCount
			if (!this.hasSearched && page * limit < recordCount) {
				this.page++
				setTimeout(() => {
					this.loadDataList()
				}, 500)
			}
		},
		methods: {
			// 重新重新事件
			onSearch() {
				this.page = 1
				this.recordCount = 0
				this.commissionList = []
				this.loadDataList()
			},
			loadDataList() {
				// 加载用户收货地址
				if (this.hasSearched) {
					return false
				}

				this.hasSearched = true
				this.$api.fenxiao.GetCommissionList({
					page: this.page,
					limit: this.limit,
				}).then(res => {
					this.hasSearched = false
					this.recordCount = res.count
					this.commissionList = this.commissionList.concat(res.data)
				}).catch(err => {
					this.hasSearched = false
					if (this.page > 0) {
						this.page--
					}
				})
			},
			// 切换展开/收起详情
			toggleDetail(index) {
				this.commissionList[index].expanded = !this.commissionList[index].expanded
			}
		}
	}
</script>

<style lang="scss" scoped>
	.commission-detail-container {
		background-color: #f8f9fa;
		min-height: 100vh;
		padding: 20rpx;
		padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
	}

	/* 佣金列表 */
	.commission-list {}

	.commission-item {
		background-color: white;
		border-radius: 16rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
		overflow: hidden;
	}

	/* 订单摘要 */
	.order-summary {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.order-left {
		flex: 1;
	}

	.order-number {
		font-size: 28rpx;
		color: #333;
		font-weight: bold;
		margin-bottom: 8rpx;
		display: block;
	}

	.order-info {
		font-size: 24rpx;
		color: #666;
		margin-bottom: 8rpx;
		display: block;
	}

	.order-date {
		font-size: 22rpx;
		color: #999;
	}

	.order-right {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
	}

	.order-amount {
		font-size: 26rpx;
		color: #333;
		font-weight: bold;
		margin-bottom: 8rpx;
	}

	.my-commission {
		font-size: 24rpx;
		color: #e74c3c;
		font-weight: bold;
		margin-bottom: 8rpx;
	}

	.expand-icon {
		transition: transform 0.3s ease;
	}

	.expand-icon.expanded {
		transform: rotate(180deg);
	}

	.icon-text {
		font-size: 20rpx;
		color: #999;
	}

	/* 佣金分配详情 */
	.commission-detail {
		padding: 0 0rpx 20rpx;
		background-color: #f8f9fa;
	}

	.detail-title {
		padding: 16rpx 0 12rpx;
	}

	.title-text {
		font-size: 26rpx;
		color: #333;
		font-weight: bold;
	}

	.detail-list {}

	.detail-item {
		background-color: white;
		padding: 16rpx 20rpx;
		border-radius: 8rpx;
		margin-bottom: 8rpx;
		border-left: 3rpx solid #ddd;
	}

	.detail-item.self-commission {
		border-left-color: #e74c3c;
		background-color: #ffeaea;
	}

	.detail-item:last-child {
		margin-bottom: 0;
	}

	.detail-content {
		width: 100%;
	}

	.detail-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 4rpx;
	}

	.detail-row:last-child {
		margin-bottom: 0;
	}

	.detail-type {
		font-size: 24rpx;
		color: #666;
	}

	.detail-rate {
		font-size: 22rpx;
		color: #999;
	}

	.detail-name {
		font-size: 26rpx;
		color: #333;
		font-weight: bold;
	}

	.detail-amount {
		font-size: 28rpx;
		color: #52a58a;
		font-weight: bold;
	}

	.detail-item.self-commission .detail-amount {
		color: #e74c3c;
	}

	/* 空状态 */
	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 100rpx 40rpx;
	}

	.empty-image {
		width: 200rpx;
		height: 200rpx;
		margin-bottom: 30rpx;
	}

	.empty-text {
		font-size: 32rpx;
		color: #999;
		margin-bottom: 16rpx;
	}

	.empty-desc {
		font-size: 26rpx;
		color: #ccc;
	}
</style>

/* 佣金分配详情 */
.commission-detail {
margin-bottom: 20rpx;
}

.detail-title {
font-size: 26rpx;
color: #333;
font-weight: bold;
margin-bottom: 16rpx;
display: block;
}

.detail-list {

}

.detail-item {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #f8f9fa;
padding: 20rpx;
border-radius: 12rpx;
margin-bottom: 12rpx;
border-left: 4rpx solid #ddd;
}

.detail-item.self-commission {
background-color: #e8f5e8;
border-left-color: #52a58a;
}

.detail-item:last-child {
margin-bottom: 0;
}

.detail-left {
flex: 1;
}

.detail-header {
display: flex;
align-items: center;
margin-bottom: 8rpx;
}

.detail-type {
font-size: 24rpx;
color: #666;
margin-right: 12rpx;
}

.level-badge {
background-color: #52a58a;
color: white;
font-size: 20rpx;
padding: 2rpx 8rpx;
border-radius: 8rpx;
font-weight: bold;
}

.level-badge.level-1 {
background-color: #e74c3c;
}

.level-badge.level-2 {
background-color: #f39c12;
}

.detail-name {
font-size: 26rpx;
color: #333;
font-weight: bold;
margin-bottom: 4rpx;
display: block;
}

.detail-rate {
font-size: 22rpx;
color: #999;
}

.detail-right {
display: flex;
flex-direction: column;
align-items: flex-end;
}

.detail-amount {
font-size: 28rpx;
color: #52a58a;
font-weight: bold;
margin-bottom: 4rpx;
}

.detail-label {
font-size: 20rpx;
color: #e74c3c;
background-color: #ffeaea;
padding: 2rpx 8rpx;
border-radius: 8rpx;
}

/* 总佣金 */
.total-commission {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 20rpx;
border-top: 1rpx solid #f0f0f0;
}

.total-label {
font-size: 28rpx;
color: #333;
font-weight: bold;
}

.total-amount {
font-size: 32rpx;
color: #e74c3c;
font-weight: bold;
}

/* 空状态 */
.empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 100rpx 40rpx;
}

.empty-image {
width: 200rpx;
height: 200rpx;
margin-bottom: 30rpx;
}

.empty-text {
font-size: 32rpx;
color: #999;
margin-bottom: 16rpx;
}

.empty-desc {
font-size: 26rpx;
color: #ccc;
}
</style>